<template>
	<view>
		<view class="TopBox">
			<view class="example-body">
				<view class="tips">
					<text>上传您添加的商品图片</text>
				</view>
				<view class="image">
					<uni-file-picker limit="1" :del-icon="true" disable-preview :imageStyles="imageStyles"
						file-mediatype="image" @success="success" @fail="fail" @select="select">点击选择图片</uni-file-picker>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>商品名称</text>
				</view>
				<view class="right">
					<input type="text" placeholder="请输入商品名称" v-model="name">
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>零售价</text>
				</view>
				<view class="right">
					<input type="text" placeholder="请输入商品售价" v-model="price">
				</view>
			</view>
			<!-- <view class="list">
				<view class="left">
					<text>成本价</text>
				</view>
				<view class="right">
					<input type="text" placeholder="请输入商品成本价" v-model="name">					
				</view>
			</view> -->
			<!-- <view class="list">
				<view class="left">
					<text>库存</text>
				</view>
				<view class="right">
					<input type="text" placeholder="请输入商品库存" v-model="kucun">
				</view>
			</view> -->
			<!-- <view class="textlist">
				<input type="text" placeholder="商品描述">
			</view> -->
			<view class="addbox">
				<view class="btn" @click="addgood">
					<text>确认添加</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				price: '',
				kucun: '',
				url:'',
				imageStyles: {
					width: 164,
					height: 164,
					border: { // 如果为 Boolean 值，可以控制边框显示与否
						color: "#fff", // 边框颜色
						width: "1px", // 边框宽度
						style: "dashed", // 边框样式						
					}
				},
			};
		},
		methods: {
			async addgood(){
				const data={
					salePrice:this.price,
				    url:this.url,
					name:this.name,
					goodsType:0,
					storeId:uni.getStorageSync('storeId')
				};
				const {
					data: res
				} = await uni.$http.post(
					`/store/addGoodsByBarcode`,data
				);
				if (res.code !== 0) return uni.$showMsg(res.message);
				setTimeout(()=>{
					uni.navigateBack()
				},2000)				
				console.log(res, '新建商品成功!');
				uni.$showMsg('添加成功!')				
			},
			success(e) {
				
			},
			fail(e) {

			},
			select(e) {
				console.log(e);
				uni.uploadFile({
					url: 'https://jkht.wteam.club/common/uploadFile',
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						"Content-Type": "multipart/form-data",
						"Authorization": uni.getStorageSync('token'),
					},
					success: (res) => {
						if (JSON.parse(res.data).code == 200) {							
							console.log(JSON.parse(res.data).urls);
							this.url=JSON.parse(res.data).urls;
						} else {
							uni.$showMsg(res.msg);
							console.log(res);
						} 
					},
					fail: (res) => {
						uni.$showMsg(res.msg);						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f8fc;
	}
	
	.addbox {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 7vh;
		.btn:active {
			background-color: rgba(79, 190, 241, 0.5);
		}
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 6vh;
			width: 80%;
			color: #fff;
			background-color: #1a91ff;
			font-size: 4vw;
		}
	}

	.textlist {
		width: 100%;
		height: 7vh;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 2vw;
		padding-left: 3vw;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		input {
			width: 100%;
		}
	}

	.list {
		width: 100%;
		height: 7vh;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1vw;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		.left {
			margin-left: 2vw;
		}

		.right {
			font-size: 35rpx;
			width: 40vw;

			text:nth-child(1) {
				margin-right: 2vw;
			}

			text:nth-child(2) {
				color: #d6d7d9;
			}
		}
	}

	.example-body {
		padding: 3vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		// background-color: #fff;
		.image {
			margin-top: 3vh;
			background-color: #fff;
			box-shadow: 2rpx 4rpx 16rpx rgba(0, 0, 0, 0.1);
			color: #1a91ff;
		}

	}
</style>